import { Flex } from "antd"
import data from "./data"
import { Chart } from "@antv/g2";
import { useEffect } from "react";
import { useImmer } from 'use-immer';

const ColumnChart=()=>{
    const [column,setColumn] =useImmer<Chart | null>(null)
   useEffect(()=>{
    const container = document.getElementById("ColumnChart");
    if (!container) return;
    console.log(column,"图表对象")
    const columnChart = new Chart({ 
        container: "ColumnChart",
        width: 600, //图表宽度
        height: 480  //图表高度
    });
    
    columnChart.options({
        // type:'interval',
        type: "interval", //柱状图
        // autoFit: true,
        data:data,
        // 动画配置
        animate: {
            enter: {
              type: 'scaleInX',
              duration: 1000, //动画持续时间
              delay: 500, //延迟时间
            //   easing   //缓动函数
            },
            update: {
              type: 'growInY',
              duration: 1000, //动画持续时间
              delay: 500, //延迟时间
            },
            exit :{
                type: 'growInY',
            }
          },
        // 图表标题
        title: {
            title: '柱状图图表', //标题
            subtitle: '我是一个副标题', //副标题
            align: 'center', //对齐方式
            // 标题样式设置
            titleFill:"#ff7300",
            titleStroke:"#ff7300", //标题描边颜色
            titleFillOpacity:0.5, //透明度
            titleOpacity:1,
            titleShadowColor: '#d3d3d3',
            titleShadowBlur: 10,
            titleShadowOffsetX: 10,
            titleShadowOffsetY: 10,
            titleCursor: 'pointer',
            // 副标题设置
            subtitleFill:"#ff7300",
           
          },
        //  图形样式配置
        style: {
            //设置圆角
            // radius
            radiusTopLeft: 20,
            radiusTopRight: 20,
            fill: "linear-gradient(270deg, #ffffff 0%, #7ec2f3 50%, #1890ff 100%)", //填充色 可以设置纯色，可以设置渐变
            stroke: "#66e364", //描边色
            lineWidth: 2, //描边宽度
            opacity: 0.5, //图形透明度
            shadowColor:"#f1e33f",// 阴影色
            
          },
          //  图形样式配置
          state: {
            selected: {
              style: {
                fill: "#ff7300",
                stroke: "#ff7300",
                lineWidth: 2,
                opacity:0.5,
              }
            }
          }  ,
         //开启滚动条
         scrollbar: {
            x: {},
            // y: {},
          },
        //   提示信息
        tooltip: {
            title: 'name', // 标题
            items: ['genre'], // 数据项
          },
        axis:{
            x:{
                title:'X轴', //X轴标题
                titleFill:"#ff7300",
                // titleStroke  描边颜色
                line: true, //是否显示轴线
                arrow: true, //是否显示箭头
                lineStroke:"#ff7300",
                lineArrowSize:30 ,//箭头尺寸
                labelFontSize: 30, //刻度值文字大小
                labelSpacing: 30, //刻度值对应间距
                labelFill:"#ff7502" //刻度值颜色
            },
            y: {
                title:'Y轴' ,// Y轴标题
                titleStroke:"#e1e1e1", //标题描边颜色
                line: true,
                arrow: true,
              },
             
            },
            //type==area的时候
            //shape 通道形状 area绘制直线连接的面积图
            // smooth 绘制平滑曲线的面积图
            // vh	 绘制阶梯面积图，先竖线后横线连接
            // hv 绘制阶梯面积图，先横线后竖线连接
            // hvh绘制阶梯面积图，竖横竖，中点连接
            //type==interval的时候
            //shape 通道形状
            // rect 绘制平滑曲线的面积图
            // hollow	 绘制阶梯面积图，先竖线后横线连接
            // funnel 绘制阶梯面积图，先横线后竖线连接
           
            encode: { x: "letter", y: "frequency",
              color:"#ff7300",
              shape: 'rect', // 配置shape通道，默认为'rect '的时候可以不写。可选'rect', 'hollow', 'funnel',
             },
    })
   
    // columnChart.interval().data(data).
    // encode('x', 'letter').encode('y', 'frequency').scale('y', {
    //     type: 'linear',
    //     range: [0.2, 0.8],
    //     alias:"时间"
    //     /* 其他配置项 */
    //   });
    // columnChart.axis('x', { title: "哈哈哈" })
    columnChart.render();
    // 保存图表实例到状态
    setColumn(columnChart);
    // 组件卸载时销毁图表
    return () => {
        columnChart?.destroy();
      };
   },[])
    return(
        <div style={{padding:"40px"}}>
            <Flex>
                <div>
                    <p>柱形图</p>
                    <div id="ColumnChart">

                    </div>
                </div>
            </Flex>
        </div>
    )
}
export default ColumnChart